<script setup>
import { ref, onMounted, computed } from 'vue'
import { getAllScoreAPI, getAllRawScoreAPI } from '@/api/score.js'

// 选择框数据
const pickerData  = ['第一学期', '第二学期']

// 选定分类项
const selectedItem = ref(0)

// 改变选项
const changeItem = (e) => {
  // selectedItem.value = index
  selectedItem.value = e.detail.value
}

// 成绩类型
const scoreType = ref(1)

// 切换成绩类型
const changeScoreType = (type) => {
  scoreType.value = type
  // 重新调用接口获取数据
  getScoreData()
  // console.log(renderData);
}

// 成绩数据
const scoreData = ref([])

// 获取成绩数据
const getScoreData = async() => {
  // 根据成绩类型和分类项获取成绩数据

  let res = {}
  if(scoreType.value === 0) {
    // 获取有效成绩数据
    // res = await getAllScoreAPI()
    // console.log(res.data);
  scoreData.value = renderData

  } else {
    // 获取原始成绩数据
    // res = await getAllRawScoreAPI()
    // console.log(res.data);
  scoreData.value = originalScoreList
  }
  // console.log(res);
}

// 初始化调用
onMounted(() => {
  getScoreData()
})

// 刷新按钮
const refresh = () => {
  getScoreData()
}

// 有效成绩备用数据
const renderData = [
  {
    scoreList: [
      {
        
        category: "军训",
        complexScore: "86.00",
        courseCategory: "",
        courseCredit: "2.0",
        finalScore: "",
        mark: "",
        method: "",
        midtermScore: "",
        minorMark: "主修",
        name: "军事训练",
        normalScore: "",
        num: "U1002001",
        property: "初修",
        skillScore: "",
      },
      {
      category: "公共课/必修课",
      complexScore: "78.00",
      courseCategory: "体育专项类",
      courseCredit: "1.0",
      finalScore: "80.00",
      mark: "",
      method: "非统考",
      midtermScore: "",
      minorMark: "主修",
      name: "大学体育1",
      normalScore: "76.00",
      num: "B0914005",
      property: "初修",
      skillScore: "",
      },
      {
        
    category: "公共课/必修课",
    complexScore: "90.00",
    courseCategory: "",
    courseCredit: "3.0",
    finalScore: "",
    mark: "",
    method: "统考",
    midtermScore: "",
    minorMark: "主修",
    name: "大学英语1",
    normalScore: "",
    num: "U0703001",
    property: "初修",
    skillScore: "",
      }
    ],
    termName: "2022-2023学年第一学期"
  },
  {
    scoreList: [
      {
        category: "公共课/公选课",
      complexScore: "95.00",
      courseCategory: "人文与艺术类",
      courseCredit: "1.0",
      finalScore: "",
      mark: "",
      method: "考查",
      midtermScore: "",
      minorMark: "主修",
      name: "网页视觉设计",
      normalScore: "",
      num: "P0604008",
      property: "初修",
      skillScore: "",
      },
      {
        
      category: "公共课/必修课",
      complexScore: "95.00",
      courseCategory: "",
      courseCredit: "3.0",
      finalScore: "",
      mark: "",
      method: "非统考",
      midtermScore: "",
      minorMark: "主修",
      name: "大学英语2",
      normalScore: "",
      num: "U0703002",
      property: "初修",
      skillScore: ""
      },
      {
        
        category: "公共课/必修课",
        complexScore: "88.00",
        courseCategory: "",
        courseCredit: "1.0",
        finalScore: "80.00",
        mark: "",
        method: "非统考",
        midtermScore: "",
        minorMark: "主修",
        name: "大学体育2",
        normalScore: "90.00",
        num: "U0901002",
        property: "初修",
        skillScore: "",
      }
    ],
    termName: "2022-2023学年第二学期"
  }
]

// 原始成绩备用数据
const originalScoreList = [
  {
    scoreList: [
      {

        category: "军训",
        complexScore: "86.00",
        courseCategory: "",
        courseCredit: "2.0",
        finalScore: "",
        mark: "",
        method: "",
        midtermScore: "",
        minorMark: "主修",
        name: "军事训练",
        normalScore: "",
        num: "U1002001",
        property: "初修",
        skillScore: "",
      },
      {
        
        category: "公共课/必修课",
        complexScore: "78.00",
        courseCategory: "体育专项类",
        courseCredit: "1.0",
        finalScore: "80.00",
        mark: "",
        method: "非统考",
        midtermScore: "",
        minorMark: "主修",
        name: "大学体育1",
        normalScore: "76.00",
        num: "B0914005",
        property: "初修",
        skillScore: "",
      },
      {
        
        category: "公共课/必修课",
        complexScore: "90.00",
        courseCategory: "",
        courseCredit: "3.0",
        finalScore: "",
        mark: "",
        method: "统考",
        midtermScore: "",
        minorMark: "主修",
        name: "大学英语1",
        normalScore: "",
        num: "U0703001",
        property: "初修",
        skillScore: "",
      }
    ],
    termName: "2022-2023学年第一学期"
  },
  {
    
scoreList: [
  {
    
      category: "公共课/公选课",
      complexScore: "95.00",
      courseCategory: "人文与艺术类",
      courseCredit: "1.0",
      finalScore: "",
      mark: "",
      method: "考查",
      midtermScore: "",
      minorMark: "主修",
      name: "网页视觉设计",
      normalScore: "",
      num: "P0604008",
      property: "初修",
      skillScore: "",
  },
  {
          
      category: "公共课/必修课",
      complexScore: "95.00",
      courseCategory: "",
      courseCredit: "3.0",
      finalScore: "",
      mark: "",
      method: "非统考",
      midtermScore: "",
      minorMark: "主修",
      name: "大学英语2",
      normalScore: "",
      num: "U0703002",
      property: "初修",
      skillScore: "",
  },
  {
    
      category: "公共课/必修课",
      complexScore: "88.00",
      courseCategory: "",
      courseCredit: "1.0",
      finalScore: "80.00",
      mark: "",
      method: "非统考",
      midtermScore: "",
      minorMark: "主修",
      name: "大学体育2",
      normalScore: "90.00",
      num: "U0901002",
      property: "初修",
      skillScore: "",
  }
],
termName: "2022-2023学年第二学期"
  }
]
</script>

<template>
  <view class="score">
    <view class="top">
      <view class="left">
        <button :class="{active: scoreType === 0}" @click="changeScoreType(0)">有效成绩</button>
        <button :class="{active: scoreType === 1}" @click="changeScoreType(1)">原始成绩</button>
      </view>
      <view class="right">
        <picker @change="changeItem" :value="selectedItem" class="" mode="selector" :range="pickerData" range-key=""  >
          <text >{{ pickerData[selectedItem] }}</text>
        </picker>
        <view>
          <image
          @click="refresh"
            src="../../static/images/refresh.png"
            mode="widthFix"
          />
        </view>
      </view>
    </view>
    <view class="content">
      <view class="title">{{ scoreData[selectedItem]?.termName }}</view>
      <view class="container">
        <view class="item" v-for="(item, index) in scoreData[selectedItem]?.scoreList" :key="index">
            <text class="name">{{ item.name }}</text>
            <text class="item-scare" v-if="scoreType">{{ item.complexScore }} </text>
            <text class="item-scare" v-else>{{ item.score }} </text>
          </view>
      </view>
    </view>
  </view>                                                                       
</template> 

 

<style scoped lang="scss">
.score {
  background-color: #efefef;
  height: 100vh;
  // text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
.top {
  margin: 0 auto;
  padding-top:  26rpx;
  display: flex;
  .left {
    width: 312rpx;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-left: 8px;
    border-radius: 20rpx;
    button {
      padding: 0;
      width: 130rpx;
      height: 70rpx;
      margin-right: 16rpx;
      border: 0;
      background: rgba(230, 230, 230, 0.8);

      box-shadow: 0px 0px 10rpx -20rpx rgba(0, 0, 0, 0.05);
      font-family: 思源黑体;
      font-size: 24rpx;
      font-weight: normal;
      line-height: 70rpx;
      text-align: center;
      letter-spacing: 0px;
      border-radius: 20rpx;
      color: #3B3B3B;
      &.active{
        background: #E065E0;
        color: #fff;
      }
    }
  }
  .right {
    display: flex;
    margin-left: 48rpx;
    picker {
      width: 176rpx;
    height: 100rpx;
    border-radius: 20rpx;
    opacity: 1;

    background: rgba(255, 255, 255, 0.82);

    box-shadow: 0px 0px 5px -10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text {
      font-family: 思源黑体;
      font-size: 24rpx;
      font-weight: normal;
      line-height: 28rpx;
      letter-spacing: 0px;

      color: #3B3B3B;
    }
    }
    view {
      margin-left: 42rpx;
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      opacity: 1;

      background: #FFFFFF;

      box-shadow: 0px 0px 10rpx -20rpx rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: center;
      align-items: center ;
      image {
        width: 60%;
        // height: 72.92%;
      }
    }

  }
}
.content {
   width: 672rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-top: 26rpx;
  height: 1260rpx;
  .title {
    font-family: 思源黑体;
    font-size: 32rpx;
    font-weight: normal;
    line-height: 46rpx;
    letter-spacing: 0px;
    color: #555555;
    padding-top: 34rpx;
     text-align: center;
  }
  .container {
    margin-top: 44rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .item {
      width: 584rpx;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #F5F5F5;
      margin-top: 26rpx;
      .name {
        font-family: 思源黑体;
        font-size: 32rpx;
        font-weight: normal;
        line-height: 46rpx;
        text-align: center;
        letter-spacing: 0px;

        color: #333333;
      }
      .item-scare {
        font-family: 思源黑体;
        font-size: 32rpx;
        font-weight: normal;
        line-height: 46rpx;
        text-align: center;
        letter-spacing: 0px;

        color: #E065E0;
        &.active {
          color: #9C9C9C;
        }
      
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

}
</style>